<template>
    <view>
        <view class="mov-area-all" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchend="onTouchend">
            <view v-for="(item,index) in movList" class="mov-view-list"
            :class="item.indexClass" :style="{left: item.x + 'rpx'}" :key="index">
                <view class="mov-area-con" :class="item.conClass">
                    <slot :movSlotData="item.data"></slot>
                </view>
            </view>
        </view>
        <view class="dot">
            <block v-for="(item,index) in dataList" :key="index">
                <view class="dot-item" :class = "{ 'active' : tabIndex == index} "></view>
            </block>
        </view>
    </view>
</template>

<script>
	export default {
		name: 'MovableSwiper',
		props: {
			/**
			 * 传入的数据数组
			 */
			dataList: {
				type: Array,
				default: function(){
					return []
				}
			},
        },
		data() {
			return {
				canMove: true,
				movType: 0,
				touchIndex: 0,
				clientX: 0,
				moveX:0,
				movList:[
					{id: 0,indexClass: 'one',conClass: '',x: 0,data:null},
					{id: 1,indexClass: 'two',conClass: '',x: 0,data:null},
					{id: 2,indexClass: 'three',conClass: '',x: 0,data:null},
					{id: 3,indexClass: 'four',conClass: '',x: 0,data:null},
					{id: 4,indexClass: 'left',conClass: '',x: -750,data:null}
				],
                dataIndex: 0,
                tabIndex:0
			};
		},
		mounted() {
			// this.movInit();
		},
		watch: {
			dataList: {
			    handler(newDataList,oldDataList) {
					this.movInit();
				},
			    deep: true,
			    immediate: true
			} 
		},
		methods:{
			movInit(){
                if(this.dataList.length >= 4){
                    let _nowId = this.movList.filter(item => item.indexClass.indexOf('four') != -1)[0].id;
                    this.dataIndex = 0;
					this.movList[_nowId].data = this.dataList[this.dataIndex];
                }else if(this.dataList.length == 2){
                    this.movList = [
                        {id: 0,indexClass: 'three',conClass: '',x: 0,data:null},
                        {id: 1,indexClass: 'four',conClass: '',x: 0,data:null},
                        {id: 2,indexClass: 'left',conClass: '',x: -750,data:null}
                    ]
                    let _nowId = this.movList.filter(item => item.indexClass.indexOf('four') != -1)[0].id;
                    this.dataIndex = 0;
					this.movList[_nowId].data = this.dataList[this.dataIndex];
                }
                else if(this.dataList.length == 3){
                    this.movList = [
                        {id: 0,indexClass: 'two',conClass: '',x: 0,data:null},
                        {id: 1,indexClass: 'three',conClass: '',x: 0,data:null},
                        {id: 2,indexClass: 'four',conClass: '',x: 0,data:null},
                        {id: 3,indexClass: 'left',conClass: '',x: -750,data:null}
                    ]
                    let _nowId = this.movList.filter(item => item.indexClass.indexOf('four') != -1)[0].id;
                    this.dataIndex = 0;
					this.movList[_nowId].data = this.dataList[this.dataIndex];
				}
			},
			onTouchstart(e){
				if(!this.canMove || this.dataList.length==0){
					return;
				}
                this.clientX=parseInt(e.touches[0].clientX);
			},
			onTouchmove(e){
				if(!this.canMove || this.dataList.length==0){
					return;
                }
                this.moveX=parseInt(e.touches[0].clientX);
				if(this.movType == 0){
					if(this.moveX>(this.clientX + 20)){   //左滑 
						if(this.dataIndex == 0){
							// uni.showToast({
							// 	icon:'none',
							// 	title:'已经是第一张卡片了'
							// })
							return;
						}
						this.movType = 1;
						this.touchIndex = this.movList.filter(item => item.indexClass.indexOf('left') != -1)[0].id;
                        this.movList[this.touchIndex].data = this.dataList[this.dataIndex-1];
                        this.tabIndex = this.movList[this.touchIndex].data.index
					}else if(this.moveX<(this.clientX - 20)){   //右滑 
						if(this.dataIndex == (this.dataList.length-1)){
							// uni.showToast({
							// 	icon:'none',
							// 	title:'已经是最后一张卡片了'
							// })
							return;
						}
						this.movType = 2;
						this.touchIndex = this.movList.filter(item => item.indexClass.indexOf('four') != -1)[0].id;
						let _nextId = this.movList.filter(item => item.indexClass.indexOf('three') != -1)[0].id;
                        this.movList[_nextId].data = this.dataList[this.dataIndex+1];
                        this.tabIndex = this.movList[_nextId].data.index
					}
					
				}else if(this.movType == 1){
					this.movList[this.touchIndex].x = (this.moveX-this.clientX-750)<=0 ? (this.moveX-this.clientX-750) : 0;
				}else if(this.movType == 2){
					this.movList[this.touchIndex].x =(this.moveX-this.clientX)<=0 ? (this.moveX-this.clientX) : 0;
				}
			},
			onTouchend(e){
				if(this.movType == 1){
					if((this.moveX-this.clientX) < 50){
						this.movList[this.touchIndex].x = -750;
						this.movType = 0;
					}else{
						this.switchCard();
					}
				}else if(this.movType == 2){
					if((this.moveX-this.clientX) > -50){
						this.movList[this.touchIndex].x = 0;
						this.movType = 0;
					}else{
						this.switchCard();
					}
                }
			},
			switchCard(){
				this.canMove = false;
				if(this.movType==1){   //左滑
					for(let i=0;i<this.movList.length;i++){
                        let _thisClass=this.movList[i].indexClass.split(' ')[0];
						switch (_thisClass){
							case 'one':
								setTimeout(()=>{
									this.movList[i].conClass = '';
									this.movList[i].indexClass = 'left';
									this.movList[i].x = -750;
									this.dataIndex-=1;
									this.canMove = true;
								},500) 
								break;
							case 'two':
								setTimeout(()=>{
                                    if(this.dataList.length == 3){
                                        this.movList[i].conClass = '';
                                        this.movList[i].indexClass = 'left';
                                        this.movList[i].x = -750;
                                        this.dataIndex-=1;
                                        this.canMove = true;
                                    }else {
                                        this.movList[i].conClass = 'animate';
									    this.movList[i].indexClass = 'one';
                                    }
								},500)
								break;
							case 'three':
								setTimeout(()=>{
                                    if(this.dataList.length == 2){
                                        this.movList[i].conClass = '';
                                        this.movList[i].indexClass = 'left';
                                        this.movList[i].x = -750;
                                        this.dataIndex-=1;
                                        this.canMove = true;
                                    }else {
                                        this.movList[i].conClass = 'animate';
									    this.movList[i].indexClass = 'two';
                                    }
								},500)
								break;
							case 'four':
								setTimeout(()=>{
									this.movList[i].conClass = 'animate';
									this.movList[i].indexClass = 'three';
								},500)
								break;
							case 'left':
								this.movList[i].conClass = '';
								this.movList[i].indexClass = 'four animate';
								this.movList[i].x = 0;
								setTimeout(()=>{
									this.movList[i].indexClass = 'four';
								},500)
								break;
							default:
								break;
						}
					}
				}else if(this.movType==2){   //右滑
					for(let i=0;i<this.movList.length;i++){
                        let _thisClass=this.movList[i].indexClass.split(' ')[0];
						switch (_thisClass){
							case 'one':
								setTimeout(()=>{
									this.movList[i].conClass = 'animate';
									this.movList[i].indexClass = 'two';
								},500)
								break;
							case 'two':
								setTimeout(()=>{
									this.movList[i].conClass = 'animate';
									this.movList[i].indexClass = 'three';
								},500)
								break;
							case 'three':
								setTimeout(()=>{
									this.movList[i].conClass = 'animate';
									this.movList[i].indexClass = 'four';
								},500)
								break;
							case 'four':
								this.movList[i].conClass = '';
								this.movList[i].indexClass = 'left animate';
								this.movList[i].x = -750;
								setTimeout(()=>{
									this.movList[i].indexClass = 'left';
									this.dataIndex+=1;
									this.canMove = true;
								},500)
								break;
							case 'left':
                                if(this.dataList.length >= 4){
                                    this.movList[i].indexClass = 'one';
                                }else if(this.dataList.length == 2){
                                    this.movList[i].indexClass = 'three';
                                }else if(this.dataList.length == 3){
                                    this.movList[i].indexClass = 'two';
                                }
								this.movList[i].conClass = '';
								this.movList[i].x = 0;
								break;
							default:
								break;
						}
					}
				}
                this.movType = 0;
			},
		}
	}
</script>

<style lang="scss">
@charset "UTF-8";
.mov-area-all{
	width: 560rpx;
    height: 670rpx;
	position: relative;
	top: 100rpx;
	box-sizing: border-box;
	.mov-view-list{
		position: absolute;
		left: 0;
		top: 0;
		width: 500rpx;
		height: 100%;
		transform: translateX(0rpx);
		.mov-area-con{
            width: 500rpx;
			height: 100%; 
            box-shadow: 0px 0px 25rpx 0px rgba(0, 0, 0, 0.15);
			position: absolute;
			background: #fff;
			border-radius: 12rpx;
		}
		&.one{
			z-index: 1;
			.mov-area-con{
				top: -20rpx;
                left: 80rpx;
				&.animate{
					transition: all 0.5s;
				}
			}
		}
		&.two{
			z-index: 2;
			.mov-area-con{
				top: -40rpx;
                left: 60rpx;
				&.animate{
					transition: all 0.5s;
				}
			}
		}
		&.three{
			z-index: 3;
			.mov-area-con{
				top: -60rpx;
                left: 40rpx;
				&.animate{
					transition: all 0.5s;
				}
			}
		}
		&.four{
			z-index: 4;
			.mov-area-con{
				top: -80rpx;
                left: 20rpx;
				&.animate{
					transition: all 0.5s;
				}
			}
		}
		&.left{
			left: -750rpx;
			z-index: 5;
			.mov-area-con{
				top: -80rpx;
                left: 20rpx;
				&.animate{
					transition: all 0.5s;
				}
			}
		}
		&.animate{
			z-index: 5;
			transition: all 0.5s;
		}
	}
}
.dot {
    margin-top: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .dot-item {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        border: 1rpx solid #6D7278;
        margin-right: 20rpx;
        &:last-child {
            margin-right: 0;
        }
    }
    .dot-item.active {
        background: #6D7278;
        transition: all 0.3s;
    }
}
</style>
